<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回收站 - 名片管理系统</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/business-style.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nunito', 'Microsoft YaHei', sans-serif;
        }
        .recycle-header {
            display: flex;
            align-items: center;
        }
        .recycle-header i {
            color: #95a5a6;
        }
        .recycle-title {
            margin-left: 0.5rem;
            font-weight: 600;
        }
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }
        .card {
            animation: fadeIn 0.5s ease-out;
        }
        .folder-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            padding: 1rem;
            margin-bottom: 0.5rem;
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
        }
        .folder-item:hover {
            border-left-color: var(--secondary-color);
            box-shadow: var(--shadow-md);
            transform: translateX(5px);
        }
        .folder-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .folder-item-name {
            font-weight: 600;
            color: var(--dark-color);
            display: flex;
            align-items: center;
        }
        .folder-item-name i {
            color: #95a5a6;
            margin-right: 0.5rem;
        }
        .folder-item-actions {
            display: flex;
            gap: 0.5rem;
        }
    </style>
</head>
<body>
    <div th:replace="fragments/header :: header"></div>
    
    <!-- Toast消息容器 -->
    <div class="toast-container"></div>
    
    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-md-8">
                <h2 class="recycle-header">
                    <a th:href="@{/user/businesscard}" class="text-dark mr-2">
                        <i class="fa fa-arrow-left"></i>
                    </a>
                    <i class="fa fa-trash fa-lg"></i>
                    <span class="recycle-title">回收站</span>
                </h2>
            </div>
            <div class="col-md-4 text-right">
                <button id="emptyRecycleBinBtn" class="btn btn-outline-secondary btn-icon" th:if="${!deletedFolders.empty}">
                    <i class="fa fa-trash-o"></i> 清空回收站
                </button>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <div th:if="${deletedFolders.empty}" class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fa fa-trash-o"></i>
                    </div>
                    <p class="empty-state-text">回收站中没有已删除的名片夹</p>
                    <a href="/user/businesscard" class="btn btn-secondary btn-icon mt-3">
                        <i class="fa fa-arrow-left"></i> 返回名片夹列表
                    </a>
                </div>
                
                <div th:unless="${deletedFolders.empty}" class="deleted-folders-container">
                    <div class="row">
                        <div th:each="folder, folderStat : ${deletedFolders}" class="col-md-6 mb-4">
                            <div class="folder-item" th:style="'animation-delay: ' + ${folderStat.index * 0.1} + 's'">
                                <div class="folder-item-header">
                                    <div class="folder-item-name">
                                        <i class="fa fa-folder-o mr-2"></i>
                                        <span th:text="${folder.folderName}">名片夹名称</span>
                                    </div>
                                    <span class="badge badge-light" th:text="${folder.cardCount != null ? folder.cardCount : 0} + ' 张名片'">0 张名片</span>
                                </div>
                                
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <small class="text-muted">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        删除于 <span th:text="${#dates.format(folder.deleteTime, 'yyyy-MM-dd HH:mm')}">删除时间</span>
                                    </small>
                                    
                                    <div class="folder-item-actions">
                                        <button class="btn btn-sm btn-outline-primary restore-folder" th:data-id="${folder.id}" title="恢复名片夹">
                                            <i class="fa fa-undo"></i> 恢复
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger delete-forever" th:data-id="${folder.id}" th:data-name="${folder.folderName}" title="永久删除">
                                            <i class="fa fa-times"></i> 永久删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 恢复名片夹确认模态框 -->
    <div class="modal fade" id="restoreFolderModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">恢复名片夹</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>您确定要恢复名片夹 "<span id="restoreFolderName"></span>" 吗？</p>
                    <p class="text-muted">名片夹及其中的所有名片将被恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmRestoreFolder">恢复</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 彻底删除名片夹确认模态框 -->
    <div class="modal fade" id="removeFolderModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">彻底删除名片夹</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>您确定要彻底删除名片夹 "<span id="removeFolderName"></span>" 吗？</p>
                    <p class="text-danger">此操作不可撤销，删除后将无法恢复！名片夹中的所有名片也将被永久删除！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveFolder">彻底删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/businesscard.js}"></script>
    <script>
        $(document).ready(function() {
            // 文件夹项目动画效果
            $('.folder-item').each(function(index) {
                $(this).addClass('fade-in');
            });
            
            // 清空回收站按钮点击事件
            $('#emptyRecycleBinBtn').on('click', function() {
                if(confirm('确定要清空回收站吗？此操作将永久删除所有回收站中的名片夹和名片，且无法恢复。')) {
                    // 这里添加清空回收站的AJAX请求
                    // ...
                    
                    // 显示成功消息
                    showToast('回收站已清空', 'success');
                    
                    // 刷新页面
                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                }
            });
            
            // 恢复和永久删除按钮悬停效果
            $('.folder-item-actions button').hover(
                function() {
                    $(this).addClass('animate__animated animate__pulse');
                },
                function() {
                    $(this).removeClass('animate__animated animate__pulse');
                }
            );
            
            // 恢复名片夹
            $(".restore-folder").click(function() {
                const folderId = $(this).data("id");
                const folderName = $(this).data("name");
                
                $("#restoreFolderName").text(folderName);
                $("#confirmRestoreFolder").data("id", folderId);
                $("#restoreFolderModal").modal("show");
            });
            
            $("#confirmRestoreFolder").click(function() {
                const folderId = $(this).data("id");
                
                $.ajax({
                    url: "/user/businesscard/folder/restore/" + folderId,
                    type: "POST",
                    success: function(response) {
                        $("#restoreFolderModal").modal("hide");
                        if (response.success) {
                            showToast("success", "<i class='fa fa-check-circle toast-icon'></i>恢复名片夹成功");
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast("error", "<i class='fa fa-times-circle toast-icon'></i>恢复名片夹失败：" + response.message);
                        }
                    },
                    error: function() {
                        $("#restoreFolderModal").modal("hide");
                        showToast("error", "<i class='fa fa-times-circle toast-icon'></i>恢复名片夹失败，请稍后重试");
                    }
                });
            });
            
            // 彻底删除名片夹
            $(".delete-forever").click(function() {
                const folderId = $(this).data("id");
                const folderName = $(this).data("name");
                
                $("#removeFolderName").text(folderName);
                $("#confirmRemoveFolder").data("id", folderId);
                $("#removeFolderModal").modal("show");
            });
            
            $("#confirmRemoveFolder").click(function() {
                const folderId = $(this).data("id");
                
                $.ajax({
                    url: "/user/businesscard/folder/remove/" + folderId,
                    type: "DELETE",
                    success: function(response) {
                        $("#removeFolderModal").modal("hide");
                        if (response.success) {
                            showToast("success", "<i class='fa fa-check-circle toast-icon'></i>彻底删除名片夹成功");
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast("error", "<i class='fa fa-times-circle toast-icon'></i>彻底删除名片夹失败：" + response.message);
                        }
                    },
                    error: function() {
                        $("#removeFolderModal").modal("hide");
                        showToast("error", "<i class='fa fa-times-circle toast-icon'></i>彻底删除名片夹失败，请稍后重试");
                    }
                });
            });
            
            // Toast消息提示函数
            function showToast(type, message) {
                const toastId = 'toast-' + Date.now();
                const toastClass = type === 'success' ? 'toast-success' : 'toast-error';
                
                const toast = $(`
                    <div class="toast ${toastClass}" id="${toastId}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                        <div class="toast-header">
                            <strong class="mr-auto">${type === 'success' ? '成功' : '错误'}</strong>
                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="toast-body">
                            ${message}
                        </div>
                    </div>
                `);
                
                $(".toast-container").append(toast);
                $(`#${toastId}`).toast('show');
                
                // 自动移除已关闭的toast
                $(`#${toastId}`).on('hidden.bs.toast', function() {
                    $(this).remove();
                });
            }
            
            // 导出全局函数供其他脚本使用
            window.showToast = showToast;
        });
    </script>
</body>
</html>